<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="确认关机" @ok="handleOk" :confirm-loading="confirmLoading">
            <div>
                <div class="title">计费规则
                    <QuestionCircleOutlined style="color: #D7D9DD;" @click="goDocs" />
                </div>
                <div class="mb-16 content">关机后，将停止计费并自动释放GPU，可能会因资源的再次分配无法启动当前实例</div>
                <div class="fz-14 col-223354 mb-24"><svg-icon name="icon_info" style="width:14px;height:14px;margin-right: 4px;color: #F5222D;" />请注意！已扣除代金券金额<span class="warn">不予返还！</span></div>
                <div>
                    <a-checkbox v-model:checked="checked"><span class="col-07F fz-14">我已了解风险，确认关机</span></a-checkbox>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { handleInstance } from 'api/modules/api.instance'
import { XsyMessage } from '@/libs/util.toast'
import {
    QuestionCircleOutlined
} from '@ant-design/icons-vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    },
});

const emit = defineEmits(['update:modelValue', 'handelOpt']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

const checked = ref(false)
const confirmLoading = ref(false);
// 确定按钮的回调
const handleOk = () => {

    if (!checked.value) {
        XsyMessage.error("请勾选关机风险！")
        return
    }
    const params = {
        instanceId: props.instance?.Instance?.instanceId,
        method: 'stop'
    }
    confirmLoading.value = true
    handleInstance(params).then(res => {
        confirmLoading.value = false
        if (res.code == 0) {
            emit('update:modelValue', false)
            emit('handelOpt', props.instance?.Instance?.instanceId)
        }
    }).catch(() => {
        confirmLoading.value = false
    })
};

function goDocs() {
    window.open(window.location.origin + '/docs/help_document/manual/price/#2-计费', '_blank')
}

</script>

<style scoped lang="scss">
.title {
    color: #223354;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0px;
}

.content {
    color: #42506C;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.warn {
    color: #F5222D;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
</style>

